<div class="jumbotron simple">
    <div class="container">
        <h1>Tài khoản <small>Cập nhật thông tin</small></h1>
    </div>
</div>
<div id="container-main" class="container">
    <div class="row">
        <div class="col-md-18 col-sm-14">

            <div class="page-header">
                <h3>
                    <i class="fa fa-thumbs-o-up"></i> Cập nhật tài khoản
                    <span class="page-header-under success"></span>
                </h3>
            </div>

            <?php $form=$this->beginWidget('CActiveForm', array(
                    'id'=>'user-form',
                    'enableClientValidation'=>true,
                    'clientOptions'=>array(
                        'validateOnSubmit' => true,
                        'validateOnChange' => true,
                    ),
                    'enableAjaxValidation'=>false,
                    'htmlOptions' => array('class' => 'form-horizontal', 'enctype'=>"multipart/form-data")
                )); ?>

            <?php if($model->email_main):?>
                <div class="form-group">
                    <?php echo $form->labelEx($model,'email_main', array('class' => 'col-sm-8 control-label')); ?>
                    <div class="col-sm-16">
                        <input type="text" class="form-control" disabled="disabled" value="<?php echo $model->email_main->email?>">
                    </div>
                </div> 
                <?php endif?>

            <?php if($model->phone_main):?>
                <div class="form-group">
                    <?php echo $form->labelEx($model,'phone_main', array('class' => 'col-sm-8 control-label')); ?>
                    <div class="col-sm-16">
                        <input type="text" class="form-control" disabled="disabled" value="<?php echo $model->phone_main->phone?>">
                    </div>
                </div> 
                <?php endif?>

            <div class="form-group">
                <?php echo $form->labelEx($model,'name', array('class' => 'col-sm-8 control-label')); ?>
                <div class="col-sm-16">
                    <?php echo $form->textField($model,'name',array('placeholder'=> $model->getAttributeLabel('name'),'maxlength'=>255, 'class' => 'form-control')); ?>
                    <?php echo $form->error($model,'name');?>
                </div>
            </div> 

            <div class="form-group" style="margin-bottom: 15px;">
                <label class="col-sm-8 control-label">Avatar</label>
                <div class="col-sm-16">

                    <div>
                        <div style="float: left;">
                            <a id="a_file" class="upload_method">Tải ảnh lên</a> |
                            <a id="a_url" class="upload_method">Từ URL</a>
                            <?php echo $form->hiddenField($model,'upload_method'); ?>
                        </div> 
                        <div style="clear: both;"></div>

                        <div id="image_file">
                            <?php echo $form->fileField($model,'image_file', array('title' => 'Upload ảnh', 'name' => 'browse_file', 'class' => 'form-control', 'style' => 'padding: 0px')); ?>
                        </div>
                        <div id="image_url">
                            <?php echo $form->textField($model,'image_url', array('placeholder' => 'http://domain.com/path/image.jpg', 'class' => 'form-control')); ?>
                        </div>
                        <?php echo $form->error($model,'image_file');?>
                        <?php echo $form->error($model,'upload_method');?>
                    </div>

                    <div>
                        <?php if($model->image):?>
                            <img id="img_current" class="img-thumbnail" style="height: 60px; width: auto;" src="<?php echo $model->avatarUrl.'?'.uniqid()?>"/>
                            <i id="avatar_change_file" class="fa fa-long-arrow-right" style="display: none;"></i>
                            <i id="avatar_change_url" class="fa fa-long-arrow-right" style="display: none;"></i>
                        <?php endif?>

                        <img id="img_file" isset="0" class="img-thumbnail" style="height: 60px; width: auto; display: none; " /> 
                        <img id="img_url" isset="0" class="img-thumbnail" style="height: 60px; width: auto; display: none; " />
                    </div>

                </div>
            </div> 
            <style>
                .upload_method{
                    cursor: pointer;
                }
                .upload_method.selected{
                    text-decoration: underline;
                    font-weight: bold;
                }
                #image_file, #image_url{
                    display: none;
                }
            </style>
            <script>
                $(function(){

                    $("#a_url").click(function(){
                        if($('#img_url').attr('isset') == '1'){
                            $('#avatar_change_url').show();  
                        }

                        $('#a_file').removeClass('selected');    
                        $('#a_url').addClass('selected');    
                        $('#image_url').show();

                        if($('#img_url').attr('src')){
                            $('#img_url').show();    
                        }

                        $('#image_file, #img_file').hide();    
                        $('#User_upload_method').val('url'); 
                        $('#avatar_change_file').hide();   
                    });

                    $("#a_file").click(function(){
                        if($('#img_file').attr('isset') == '1'){
                            $('#avatar_change_file').show();  
                        }

                        $('#a_url').removeClass('selected');    
                        $('#a_file').addClass('selected');    
                        $('#image_file').show();

                        if($('#img_file').attr('src')){
                            $('#img_file').show();    
                        }

                        $('#image_url, #img_url').hide();
                        $('#User_upload_method').val('file');   
                        $('#avatar_change_url').hide();   
                    });


                    $("#browse_file").change(function(evt){                               
                        var files = evt.target.files;
                        var f = files[0];

                        if(!f.type.match('image.*')) {
                            alert('File không hợp lệ. Hãy chọn 1 file ảnh khác.');
                            return false;   
                        }

                        var i = document.createElement('input');
                        if('multiple' in i){
                            var reader = new FileReader();
                            reader.readAsDataURL(f);
                            reader.onload = (function(){
                                return function(e){
                                    $('#img_url').hide(); 
                                    $('#img_file').attr('src', e.target.result).show();
                                    $('#img_file').attr('isset', 1);
                                    $('#avatar_change_file').show();   
                                };
                            })(f);
                        }
                    });

                    $("#User_image_url").bind('change keyup blur', function(evt){
                        var method = $('#User_upload_method').val();
                        var ext = $(this).val().split('.').pop().toLowerCase();
                        console.log(ext);
                        if(method == 'url' && $.inArray(ext, ['jpg', 'gif', 'png']) >= 0){
                            $('#img_file').hide();
                            $('#img_url').attr('src', $(this).val()).show();
                            $('#img_url').attr('isset', 1); 
                            $('#avatar_change_url').show(); 
                        } 
                    });

                    <?php if($model->upload_method == 'file'):?>
                        $('#image_file').show();    
                        $('#image_url').hide(); 
                        $('#a_file').addClass('selected'); 
                        <?php else:?>
                        $('#image_url').show();    
                        $('#image_file').hide();
                        $('#a_url').addClass('selected');
                        <?php if($model->image_url):?>
                            $('#img_url').attr('src', '<?php echo $model->image_url?>').show();
                            <?php endif?> 
                    <?php endif?>
                });
            </script>
            <div class="form-group">
                <?php echo $form->labelEx($model,'city_id', array('class' => 'col-sm-8 control-label')); ?>
                <div class="col-sm-16">
                    <?php echo $form->dropDownList($model,'city_id', City::model()->data, array('empty' => 'Chọn thành phố', 'class' => 'form-control')); ?>
                    <?php echo $form->error($model,'city_id');?>
                </div>
            </div>
            <div class="form-group">
                <?php echo $form->labelEx($model,'district_id', array('class' => 'col-sm-8 control-label')); ?>
                <div class="col-sm-16">
                    <?php echo $form->dropDownList($model,'district_id', $district_data, array('empty' => 'Chọn quận', 'class' => 'form-control')); ?>
                    <?php echo $form->error($model,'district_id');?>
                </div>
            </div>
            <div class="form-group">
                <?php echo $form->labelEx($model,'address', array('class' => 'col-sm-8 control-label')); ?>
                <div class="col-sm-16">
                    <?php echo $form->textField($model,'address',array('size'=>60,'maxlength'=>255, 'class' => 'form-control')); ?>
                    <?php echo $form->error($model,'address');?>
                    <small><i id="address_full"></i></small>
                </div>
            </div>
            <div class="form-group">
                <?php echo $form->labelEx($model,'dob', array('class' => 'col-sm-8 control-label')); ?>
                <div class="col-sm-16">

                    <?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                            //'name'=>'User[dob]',
                            'attribute'=>'dob',
                            'model'=>$model,
                            'value' => $model->dob, 
                            'language'=>'vi',
                            'options'=>array(
                                'showAnim'=>'fold',
                                'dateFormat'=>'dd-mm-yy',
                                'changeMonth' => 'true',
                                'changeYear' => 'true',
                                'yearRange' => '-90:-10',
                                'defaultDate' => '01-01-1985'
                            ),
                            'htmlOptions'=>array(
                                'class' => 'form-control'
                            ),
                        ));?>
                    <?php echo $form->error($model,'dob');?>
                </div>
            </div>


            <div class="form-group">
                <?php echo $form->labelEx($model,'gender', array('class' => 'col-sm-8 control-label')); ?>
                <div class="col-sm-16">
                    <?php echo $form->dropDownList($model,'gender', User::model()->genderData, array('empty' => 'Chưa xác đinh', 'class' => 'form-control')); ?>
                    <?php echo $form->error($model,'gender');?>
                </div>
            </div> 
            <div class="form-group">
                <?php echo $form->labelEx($model,'website', array('class' => 'col-sm-8 control-label')); ?>
                <div class="col-sm-16">
                    <?php echo $form->textField($model,'website',array('size'=>60,'maxlength'=>255, 'class' => 'form-control')); ?>
                    <?php echo $form->error($model,'website');?>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-8 col-sm-16">
                    <button class="btn btn-primary" type="submit">
                        <i class="fa fa-cloud-upload"></i> Cập nhật
                    </button> 
                </div>
            </div> 
            <?php $this->endWidget(); ?>
            <hr class="visible-xs"/>
        </div>
        
        <div class="col-md-6 col-sm-10">
            <?php $this->renderPartial('_menu');?>
        </div>
    </div>
</div>



<script>
    $(function(){
        var districts = $.parseJSON('<?php echo json_encode(District::model()->dataGroupByCity)?>');
        $("#User_city_id").change(function(){
            var city_id = $(this).val();
            $("#User_district_id").html('<option value="">Chọn quận</option>');
            $.each(districts[city_id], function(key, value){
                $("#User_district_id").append('<option value="'+key+'">'+value+'</option>');
            });
            if($("#User_address").val().length > 0){
                write_address_full();    
            }

        });

        $("#User_district_id").change(function(){
            if($("#User_address").val().length > 0){
                write_address_full();    
            }
        });

        $("#User_address").keyup(function(){
            write_address_full();
        });

        function write_address_full(){
            var city =       $("#User_city_id option:selected").text();
            var district =   $("#User_district_id option:selected").text();
            var address =   $("#User_address").val();
            var addressFull = (address != '') ? address +', '+ district + ', '+ city : '';
            $('#address_full').text(addressFull);
        }
        write_address_full();

    });   
</script>